<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>query layout</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../resources/css/styles.css" rel="stylesheet">
<link href="css/jquery-ui.css" rel="stylesheet">
<link href="../resources/css/datagrid.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="../resources/component/template.min.js"></script>
<script type="text/javascript" src="../resources/component/jquery.js"></script>
<script type="text/javascript" src="external/jquery-ui.js"></script>
<script type="text/javascript" src="external/jquery.layout-latest.js"></script>
<script type="text/javascript" src="../resources/component/jquery.dataset.js"></script>
<script type="text/javascript" src="external/common.js"></script>
<script type="text/javascript" src="../resources/component/jquery.datagrid.js"></script>
<SCRIPT type="text/javascript">
var outlayout;
$(document).ready(function () {
	outlayout = $('body').layout({ 
				center__paneSelector:	".ui-layout-center" 
			,	east__paneSelector:	".ui-layout-east" 
			,	east__size:				335
			,	spacing_open:			3  // ALL panes
			,	spacing_closed:			3 // ALL panes
		
	});
 
});
</SCRIPT>
</HEAD>
<BODY>
<form name="queryForm" method="post">
<DIV class="ui-layout-center" >
			<div class="txt-r btn-bar">
				<input type="button"  class="btn" value="生成参数" id="parse" />
			</div>
			<div id="tabs" class="sqlarea">
				<ul>
					<li><a href="#tabs-1">定义语句</a></li>
					<li><a href="#tabs-2">执行语句</a></li>
				</ul>
				<div id="tabs-1" class="tabs">
					<textarea name="sqldefine" style="height: 100%; width: 100%;" ></textarea>
				</div>
				<div id="tabs-2" class="tabs">
					<textarea name="sqlexcute" style="height: 100%; width: 100%;"></textarea>
				</div>
			</div>
		</DIV>
<DIV class="ui-layout-east">
			<div class="txt-r btn-bar">
						<input type="button" value="删除" class="btn" id="delete" /> 
						<input type="button" value="清除" class="btn" id="clear" />
				</div>
			<div class="datagrid dtypegrid" id="dtypeGrid">
				<table>
					<thead>
						<tr style="height: 10px;">
							<th>类型编号</th>
							<th>类型名称</th>
							<th>参数位置</th>
							<th>输入/输出</th>
							<th>参数名称</th>
						</tr>
					</thead>
					<tbody></tbody>
					<tfoot></tfoot>
				</table>
			</div>
		</DIV>
</form>
</BODY>
 
<script>
	$(function() {
		$("#tabs").tabs();
	});
	var datatypes = window.parent.datatypeGrid.dataset.datas
	var dtypeGriddata = {
		sqlid : "1000",
		key:"INDEX",
		pageNo : 0,
		params : {},
		multiSelect:true,
		columns : [ {
			field : "DTYPE",
			cls : "txt-l"  
		}, {
			field : "DTYPE",
			cls : "txt-l",
			edit:{
				type:"select" ,
				datas: datatypes ,
	            nameKey: "typelabel",
	            valueKey: "typevalue"
			},
	        render:function(value, data){
	        	return data.DTYPENAME;
	        }
		}, {
			field : "INDEX",
			cls : "txt-l",
		}, {
			field : "IOTYPE",
			cls : "txt-l",
			edit:{
				type:"select" ,
				datas: [{name:"in",value:"in"},{name:"out",value:"out"},{name:"inout",value:"inout"}] ,
	            nameKey: "name",
	            valueKey: "value"
			}
			
		}, {
			field : "NAME",
			cls : "txt-l",
			edit:{
				type:"text"
			}
		} ]
	};
	var dtypeGrid = $("#dtypeGrid").DataGrid(dtypeGriddata);
	dtypeGrid.on("change", "td[data-field='DTYPE']", function(event, value, record, exInfo) {
		record.DTYPE = value;
		record.DTYPENAME = exInfo.name;
		dtypeGrid.dataset.modifyRecord(record);
	});
	//	dtypeGrid.dataset.setDatas([],[],{aggrs:[],recordcount:0});
	function getParamsJson() {
		var sqldefine = $("[name='sqldefine']").val();
		var sqlexcute = $("[name='sqlexcute']").val();
		var queryJson = {
			def_select_sql : sqldefine,
			select_sql : sqlexcute,
			def_select_params :JSON.stringify(dtypeGrid.dataset.datas)
		};
		return queryJson;
	}

	$("#parse").click(function() {
    	  parent.parse($("[name='sqldefine']").val(),$("[name='sqlexcute']"),dtypeGrid);
	});
	$("#delete").click(function() {
		 var records = dtypeGrid.getSeleted();
		    for (var i = 0; i < records.length; i++) {
		    	dtypeGrid.dataset.deleteRecord(records[i]);
		    };  
	});
	$("#clear").click(function() {
		dtypeGrid.dataset.setDatas([], [], {
			aggrs : [],
			recordcount : 0
		});
	});
	function push(data){
		 if(data){
			//data.def_insert_params 
		    $("[name='sqldefine']").val(data.def_select_sql);
		    $("[name='sqlexcute']").val(data.select_sql);
		    dtypeGrid.dataset.setDatas(JSON.parse(data.def_select_params), [], {
				recordcount : 0
			});
		 }
	}
</script>
</HTML>